<template>
	<div class="dept-page table-box">
		<ProTable
			ref="proTable"
			:title="buttonsList?.length ? '' : $t('group.tab_title.groupmanage')"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
			:pagination="false"
		>
			<!-- 表格 header 按钮 -->
			<template #tableHeader="scope">
				<el-button v-for="(item, index) in buttonsList" :key="index" :type="item.btnClass" @click="clickBtn(item.path, scope)">
					<i :class="`iconfont ${item.icon}`"></i>
					{{ item.menuName }}
				</el-button>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-link type="primary" link class="iconfont iconedit" @click="openDrawer($t('group.dialog_title.mod'), scope.row)">{{
					$t("group.operation.edit")
				}}</el-link>
				<el-link type="primary" link class="iconfont icontrash-2" @click="deleteData(scope.row)">{{
					$t("group.operation.delete")
				}}</el-link>
			</template>
		</ProTable>
		<formDialog ref="drawerRef" />
	</div>
</template>

<script setup lang="tsx" name="dept">
import { Dept } from "@/api/interface";
import { addDept, deleteDept, editDept, getDeptList } from "@/api/modules/dept";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useHandleData } from "@/hooks/useHandleData";
import { showTips } from "@/utils/util";
import { ElMessage } from "element-plus";
import { ComponentInternalInstance, getCurrentInstance, reactive, ref } from "vue";
import formDialog from "./components/form.vue";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	sort: "order_num",
	order: true
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageIndex && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		datalist: data.records.children
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getDeptList"
const getTableList = (params: any) => {
	return getDeptList(params);
};
const buttonsList = ref();
onMounted(async () => {
	// 获取页面按钮权限
	buttonsList.value = await useAuthButtons();
});
const clickBtn = (val: string, scope: any) => {
	switch (val) {
		case "add":
			openDrawer(proxy?.$t("group.dialog_title.add"), scope.selectList.length ? { parentId: scope.selectList[0].id } : {});
			break;
		case "del":
			if (scope.selectList.length == 0) return ElMessage.error(proxy?.$t("group.elmsg.del"));
			batchDelete(scope.selectList.map((item: any) => item.id));
			break;
		case "mod":
			if (scope.selectList.length != 1) return ElMessage.error(proxy?.$t("group.elmsg.mod"));
			openDrawer(proxy?.$t("group.dialog_title.mod"), scope.selectList[0]);
			break;
	}
};

// 表格配置项
const columns: ColumnProps[] = [
	{ type: "selection", fixed: "left", width: "auto" },
	{
		prop: "deptName",
		label: proxy?.$t("group.tableis_label.dept_name"),
		search: { el: "input" },
		align: "left"
	},
	{
		prop: "description",
		label: proxy?.$t("group.tableis_label.description")
	},
	{
		prop: "createTime",
		label: proxy?.$t("group.tableis_label.create_time")
	},
	{ prop: "modifyTime", label: proxy?.$t("group.tableis_label.modify_time") },
	{ prop: "operation", label: proxy?.$t("group.tableis_label.operation"), fixed: "right", width: 150 }
];

// 删除信息
const deleteData = async (params: Dept.ResDeptList) => {
	let { code, message } = await useHandleData(
		deleteDept,
		{ ids: params.id },
		`${proxy?.$t("group.tips_title.delete")}【${params.deptName}】`
	);
	let ok = showTips(code, proxy?.$t("group.tips.delete"), message);
	if (ok) {
		proTable.value.clearSelection();
		proTable.value.reset();
	}
};

// 批量删除信息
const batchDelete = async (id: string[]) => {
	let { code, message } = await useHandleData(deleteDept, { ids: id.join(",") }, proxy?.$t("group.tips_title.batchdelete"));
	let ok = showTips(code, proxy?.$t("group.tips.delete"), message);
	if (ok) {
		proTable.value.clearSelection();
		proTable.value.reset();
	}
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref();
const openDrawer = (title: string | undefined, rowData: Partial<Dept.ResDeptList> = {}) => {
	let params = {
		title,
		rowData: { ...rowData },
		isView: title === proxy?.$t("group.dialog_title.view"),
		api: title === proxy?.$t("group.dialog_title.add") ? addDept : title === proxy?.$t("group.dialog_title.mod") ? editDept : "",
		getTableList: proTable.value.getTableList
	};
	drawerRef.value.acceptParams(params);
};
</script>
<style lang="scss"></style>
